<template>
  <view class="tab-container">
    <my-navbar-top></my-navbar-top>
    <view class="category-container">
      <!-- 搜索输入框 -->
      <view class="search-input-container">
        <view class="search-input">
          <view class="search-input-icon">
            <image src="/static/images/search.png" mode="widthFix"></image>
          </view>
          <input
            v-model="searchValue"
            style="flex: 1; margin-left: 10rpx; margin-right: 10rpx"
            type="text"
            @focus="inputFocus"
            placeholder="请输入关键词"
            placeholder-style="color: #999;font-size: 24rpx"
          />
          <view
            class="search-input-close"
            v-if="searchValue"
            @click="handleClear"
          >
            <image src="/static/images/clear.png" mode="widthFix"></image>
          </view>
        </view>
        <!-- 搜索按钮 -->
        <view class="search-button" @click="handleSearch()">搜索</view>
      </view>
      <view style="flex: 1; transform: translateY(0); overflow: hidden">
        <!-- 顶部弹框 -->
        <uni-popup ref="topPopup">
          <view class="search-recommend">
            <view
              class="search-recommend-title"
              v-if="searchHistory.length != 0"
            >
              <view>历史搜索</view>
              <view class="search-recommend-del" @click="deleteHistory">
                <image src="/static/images/del.png" mode="widthFix"></image>
              </view>
            </view>
            <view class="search-recommend-list">
              <view
                class="search-recommend-item"
                v-for="item in searchHistory"
                :key="item.id"
                @click="searchByHistory(item.name)"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </uni-popup>

        <!-- 内容区域 左右 -->
        <view class="content-container">
          <view class="content-left">
            <!-- 一级 -->
            <view v-for="(item, index) in leftList" :key="item.id">
              <view
                class="content-left-item"
                :class="{ active: item.id === activeId }"
                @click="handleLeftItem(index)"
              >
                <view>{{ item.name }}</view>
                <!--  {{ item.product_type_two_name }} -->
              </view>
              <!-- <view
              class="content-left-item"
              style="background-color: #dcdcdc; font-weight: 400"
              :class="{
                open: item.openChild,
                close: !item.openChild,
              }"
              v-for="it in item.child"
              :key="it.id"
              @click="handleLeftTowItem(it)"
            >
              {{ it.name }}
            </view> -->
            </view>
          </view>
          <view class="content-right">
            <view
              class="content-right-item"
              v-for="item in rightList"
              :key="item.id"
              @click="handleRightItem(item)"
            >
              <image
                v-if="item.name !== '全部'"
                :src="item.image"
                mode="heightFix"
              ></image>
              <view
                v-if="item.name === '全部'"
                style="color: #fff; font-size: 24rpx"
              >
                {{ item.name }}
              </view>
              <view v-else class="content-right-item-title">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 悬浮按钮 -->
    <float-icon></float-icon>
    <custom-tab-bar :current="1"></custom-tab-bar>
  </view>
</template>

<script>
import floatIcon from '@/components/floatIcon.vue'
export default {
  name: 'category',
  components: {
    floatIcon,
  },
  data() {
    return {
      searchHistory: [], // 历史搜索
      searchValue: '', // 搜索关键词
      leftList: [], // 左侧列表
      rightList: [], // 右侧列表
      activeId: 0, // 当前选中的左侧列表id
    }
  },
  mounted() {
    this.getLeftList()
  },
  onShow() {
    uni.removeStorageSync('selectedBrand')
    this.searchValue = ''
    this.$api.getHistorySearch().then((res) => {
      console.log(res, 'res-历史搜索')
      this.searchHistory = res.data.history_search || []
    })
  },
  methods: {
    // 输入框聚焦后，展示遮罩层
    inputFocus() {
      // 获取历史搜索
      this.$api.getHistorySearch().then((res) => {
        console.log(res, 'res-历史搜索')
        this.searchHistory = res.data.history_search || []
      })
      this.$refs.topPopup && this.$refs.topPopup.open('top')
    },
    // 获取左侧列表
    getLeftList() {
      this.$api.getHotRecommend({is_new:1}).then((res) => {
        console.log(res, 'res-热门推荐')
        // this.suggestList = res.data.hot || []
        // this.moreList = res.data.more || []
        // hot 拼接 more
        this.leftList = [...res.data.hot, ...res.data.more]
        console.log(this.leftList, 'this.leftList')
        this.activeId = this.leftList[0].id
        this.getRightList()
      })
    },
    // 获取右侧列表
    getRightList() {
      this.$util.showLoading()
      this.$api
        .getCategory({
          product_type_one_id: this.activeId,
        })
        .then((res) => {
          console.log(res)
          this.rightList = res.data
        })
    },
    // 点击右侧列表 跳转商品列表
    handleRightItem(item) {
      uni.navigateTo({
        url: `/pages/home/list/index?product_type_one_id=${item.product_type_one_id}&category_id=${item.id}`,
      })
    },
    handleOrder(type) {
      console.log(type)
    },
    handleLeftItem(index) {
      console.log(index, 'index')
      this.activeId = this.leftList[index].id
      this.getRightList()
    },
    handleLeftTowItem(item) {},

    // 删除历史搜索
    deleteHistory() {
      this.$api.delHistorySearch().then((res) => {
        console.log(res, 'res-删除历史搜索')
        if (res.code == 0) {
          this.searchHistory = []
        }
      })
    },
    // 搜索
    handleSearch(name = '') {
      console.log('搜索')
      if (this.searchValue || name) {
        uni.navigateTo({
          url: `/pages/home/list/index?search_value=${
            this.searchValue || name
          }`,
        })
      }
    },
    // 清空搜索
    handleClear() {
      this.searchValue = ''
    },
    // 根据历史搜索进行搜索
    searchByHistory(name) {
      this.handleSearch(name)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
